<template>
  <div class="pt-12  dark:bg-gray-900 w-screen">
    <div class=" flex justify-center flex-wrap">
      <!-- 主卡片容器 -->
      <div class="md:w-2/3 w-full m-2 bg-white rounded-xl shadow-sm hover:shadow-md 
                dark:bg-gray-800 dark:hover:shadow-xl dark:border-gray-600
                transition-all duration-300 border border-gray-200 
                group overflow-hidden">
        <el-collapse class="dark:[&_.el-collapse-item\_\_header]:bg-gray-800 
                          dark:[&_.el-collapse-item\_\_header]:text-gray-100
                          dark:[&_.el-collapse-item\_\_wrap]:bg-gray-700/50">
          <el-collapse-item v-for="item in artiles" :name="item.date" class="dark:border-b-gray-600">
            <template #title>
              <div class="p-3 flex items-center gap-2">
                <span class="text-xl text-red-500 dark:text-red-400">{{ item.date }}</span>
                <el-tag type="warning" class="dark:!bg-orange-700 dark:!border-orange-600 dark:!text-orange-100">
                  有更新
                </el-tag>
              </div>
            </template>

            <!-- 文章内容区 -->
            <div class="m-3 space-y-4">
              <article v-for="n in 2" class="flex flex-col gap-3 p-4 border rounded-lg transition-colors
                      hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700/50
                      dark:text-gray-200">
                <div class="flex items-baseline gap-4">
                  <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">06</span>
                  <h3 class="text-xl font-semibold truncate">
                    Linux命令6
                  </h3>
                </div>

                <!-- 元信息 -->
                <div class="flex items-center gap-4 text-sm">
                  <div class="flex items-center gap-1.5 text-gray-500 dark:text-gray-300">
                    <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                    <span class="truncate">技术小站</span>
                  </div>

                  <div class="h-4 w-px bg-gray-200 dark:bg-gray-500"></div>

                  <div class="flex items-center gap-1.5 text-gray-500 dark:text-gray-300">
                    <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span>2023-10-06</span>
                  </div>
                </div>
              </article>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useLoadingStore } from '../../ts/pinia';
const loadingStore = useLoadingStore()
onMounted(() => {
  loadingStore.hide()
})

import { useRouter } from 'vue-router';
let router = useRouter()
function navigateTo(id: string) {
  // router.push("/articles/content" + "?" + "id=" + id)
}
let artiles = ref([{
  date: '2023-10',
  content: {
    id: "1",
    title: "Linux命令6",
    subtitle: "常用Linu命令手册与使用技巧",
    author: "技术小站",
    time: "2023-10-20",
    viewCount: "23",
    likeCount: "356"
  }
}, {
  date: '2023-11',
  content: {
    id: "2",
    title: "Linux命令6",
    subtitle: "常用Linu命令手册与使用技巧",
    author: "技术小站",
    time: "2023-10-20",
    viewCount: "23",
    likeCount: "356"
  }
},])
</script>

<style scoped></style>